<template>
  <div class="header">
    <div>
      <SalesOrderQuery @queryClick="inquiry" @resettingClick="resetting"/>
    </div>
    <el-card>
      <template #header>
        <div class="customerTitle1">
          <span class="leve2_title" >售后单信息</span>
          <div >
<!--            <el-button
              class="customerButton1"
              plain
              size="small"
              type="primary"
              @click="create(2)"
            >
              变更
            </el-button>-->
            <el-button
              @click="remove"
            >
              取消
            </el-button>
            <el-button
              class="customerButton1"
              @click="create(3)"
            >
              确认收货
            </el-button>
            <el-button
              plain
              type="primary"
              @click="create(1)"
            >
              新建
            </el-button>
          </div>
        </div>
      </template>
    <div>
      <el-table
        v-loading="loading"
        load="false"
        ref="multipleTableRef"
        border
        :data="salesOrderList"
        height="450px"
        style="width: 100%"
      >
        <el-table-column align="center" width="50" fixed="left">
          <template #default="scope">
          <div class="table_style">
            <label class="el-checkbox"
                   :class="{ 'is-checked': radioIndex && radioIndex.uid === scope.row.uid }"
                   @click="handleRadio(scope.row)"
            >
              <span class="el-checkbox__input" :class="{ 'is-checked':  radioIndex && radioIndex.uid === scope.row.uid  }"><span class="el-checkbox__inner"></span></span>
            </label>
          </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" align="center" width="60" fixed="left">
          <template #default="scope">
            <div class="table_style">
<!--              <label class="el-checkbox"
                     :class="{ 'is-checked': radioIndex && radioIndex.uid === scope.row.uid }"
                     @click="handleRadio(scope.row)"
              >
                <span class="el-checkbox__input" :class="{ 'is-checked':  radioIndex && radioIndex.uid === scope.row.uid  }"><span class="el-checkbox__inner"></span></span>
              </label>-->
              <span style="margin-left: 5px"
                    v-text="(currentPage - 1) * pageSize + (scope.$index + 1)"
              ></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="售后单号" align="center" width="150" fixed="left">
          <template #default="scope">
               <span
                 class="ellipsis textFont"
                 @click="details(scope.row)"
               >
                 {{scope.row.uid || '--' }}
               </span>
          </template>
        </el-table-column>
        <el-table-column label="单据号" align="center" min-width="150">
          <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.order_group_uid,  '')"
               ></span>
          </template>
        </el-table-column>
        <el-table-column label="售后分类" align="center" width="100">
          <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.type_text,  '')"
               ></span>
          </template>
        </el-table-column>
<!--        <el-table-column label="销售组织" align="center" width="150">-->
<!--          <template #default="scope">-->
<!--               <span-->
<!--                 class="ellipsis"-->
<!--                 v-text="_FieldFormat(scope.row.trade_from,  '')"-->
<!--               ></span>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="客户" align="center" min-width="225" >
          <template #default="scope">
               <span
                 class="ellipsis "
                 style="text-align: left"
                 v-text="_FieldFormat(scope.row.customer_name,  '')"
               ></span>
          </template>
        </el-table-column>
        <el-table-column label="售后单状态" align="center" width="100">
          <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.status_text,  '')"
               ></span>
          </template>
        </el-table-column>
<!--        <el-table-column label="原单据状态" align="center" width="130">
          <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.order_status_text,  '')"
               >
               </span>
          </template>
        </el-table-column>-->
        <el-table-column label="退款状态" align="center" width="90">
          <template #default="scope">
               <span
                 class="ellipsis"
               >
                 {{scope.row.refund_status_text || '--'}}
               </span>
          </template>
        </el-table-column>
        <el-table-column label="货物状态" align="center" width="90">
          <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.good_status_text,  '')"
               ></span>
          </template>
        </el-table-column>
        <el-table-column label="退货数量" align="center" width="90">
          <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.return_number || 0,  '')"
               ></span>
          </template>
        </el-table-column>
        <el-table-column label="补发数量" align="center" width="90">
          <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.reissue_number || 0,  '')"
               ></span>
          </template>
        </el-table-column>
        <el-table-column label="实际退货数量" align="center" width="110">
          <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.real_return_number,  '')"
               ></span>
          </template>
        </el-table-column>
        <el-table-column label="申请退款金额" align="center" width="110">
          <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="'￥'+_FieldFormat(scope.row.return_amount,  '')"
               ></span>
          </template>
        </el-table-column>
        <el-table-column label="实际退款金额" align="center" width="110">
          <template #default="scope">
            <span
              class="ellipsis numberMoney"
              v-text="'￥'+_FieldFormat(scope.row.real_return_amount,  '')"
            ></span>
          </template>
        </el-table-column>
<!--        <el-table-column label="货物状态" align="center" width="150">
          <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.update_time,  '')"
               ></span>
          </template>
        </el-table-column>-->
<!--        <el-table-column label="收货联系人" align="center" width="150">
          <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.contact_user,  '')"
               ></span>
          </template>
        </el-table-column>
        <el-table-column label="联系电话" align="center" width="150">
          <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.contact_tel,  '')"
               ></span>
          </template>
        </el-table-column>
        <el-table-column label="收货地址" align="center" width="200">
          <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.address,  '')"
               ></span>
          </template>
        </el-table-column>-->
        <el-table-column label="创建人" align="center" width="90">
          <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.created_user_name,  '')"
               ></span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" min-width="150">
          <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.remark,  '')"
               ></span>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" align="center" width="160">
          <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.created_at,  '')"
               ></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="110" fixed="right">
          <template #default="scope">
            <el-button v-if="scope.row.status != '101'" link type="primary" @click="details(scope.row)">
              查看详情
            </el-button>
            <el-button v-else link type="primary" @click="tackle(scope.row)">
              去处理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="customerPagination">
      <el-pagination
        background
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="total, prev, pager, next,sizes, jumper"
        :page-sizes="[20, 50, 100, 200]"
        small="small"
        :total="count_number"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    </el-card>
    <TakeOver  ref="takeOver" @addressSubmit="addressSubmit" />
  </div>
</template>

<script setup lang="ts">
import SalesOrderQuery from './component/SalesOrderQuery.vue'
import {ref} from "vue";
import {DateFormat, FieldFormat} from "/@/utils/utils";
import TakeOver from '/@/views/order_management/orderQuery/component/TakeOver.vue'
import router from "/@/router";
import {customerOrderTrack, customerUpdateStatus} from "/@/api/dms/customerOrder";
import {ElMessage, ElMessageBox} from "element-plus";
import {getRefundCancel, getRefundList} from "/@/api/dms/refund";
/*import .meta.env
console.log(import .meta.env.VITE_APP_BASE_KEY)*/
defineOptions({
    name: 'SalesOrder',
  })
//router.push(`/order/addOrder?path=3&id=${data.data.uid}`)
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
const queryList = ref<any>({})
const pageSize = ref(20)
const currentPage = ref(1)
const count_number = ref(0)
const loading = ref<boolean>(false)
const salesOrderList = ref<any>([])
const  takeOver = ref<any>(null)
//分页
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getRefundData(queryList.value)
}
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getRefundData(queryList.value)
}
// 单选
const radioIndex = ref<any>(undefined)
// 单选[再次点击可取消]
const handleRadio = (row: any) => {
  if (radioIndex.value && radioIndex.value.uid == row.uid  )  {
    radioIndex.value = undefined
    return
  }
  radioIndex.value = row
}
//创建
const create = (type:any)=>{
  if(type == 1){
    router.push(`/sales/addSales`)
  } else if (type == 3){
    if(radioIndex.value && radioIndex.value.type == "reissue"){
      takeOver.value.openUp = true
    takeOver.value.uid = radioIndex.value.uid
    takeOver.value.type = 4
    }else {
      ElMessage.warning(`补发售后单才可以进行确认收货，请选择售后分类是补发并且状态为待确认的售后订单。`)
    }

  }else {
    if(radioIndex.value && radioIndex.value.is_change){
      router.push(`/sales/addSales?uid=${radioIndex.value.uid}`)
      localStorage.setItem('salesStatus','1')
    }else {
      ElMessage.warning(`请先选择可变更的售后单`)
    }
  }

}
const tackle = (row:any)=>{
  router.push(`/sales/addSales?uid=${row.uid}`)
  localStorage.setItem('salesStatus','0')
}
const details = (row:any)=>{
  router.push(`/sales/salesDetails?path=1&uid=${row.uid}`)
}
const inquiry = (va: any) => {
  const data = {
    orderSn: va.orderSn,
    customerUid: va.customerUid,
    deliveryOrderId: va.deliveryOrderId,
    type: va.type,
    status: va.status,
    afterSaleSn: va.afterSaleSn,
    salesOrgId: va.salesOrgId,
    expressSn: va.expressSn,
    goods_name:va.goods_name,
    goods_no:va.goods_no,
  }
  queryList.value = { ...queryList.value, ...data }
  currentPage.value = 1
  pageSize.value = 20
  getRefundData(data, 1)
}
const resetting = (va: any) => {
  const data = {
    orderSn: va.orderSn,
    customerUid: va.customerUid,
    deliveryOrderId: va.deliveryOrderId,
    type: va.type,
    status: va.status,
    afterSaleSn: va.afterSaleSn,
    salesOrgId: va.salesOrgId,
    expressSn: va.expressSn,
    goods_name:va.goods_name,
    goods_no:va.goods_no,
  }
  queryList.value = { ...queryList.value, ...data }
  currentPage.value = 1
  pageSize.value = 20
  getRefundData(data, 2)
}
const getRefundData = async (value:any,type=0)=>{
  loading.value = true
  await getRefundList({ page: currentPage.value, limit: pageSize.value, ...value }).then((data: any) => {
    if (data.code == 200) {
      loading.value = false
      count_number.value = data.data.total
      salesOrderList.value = data.data.lists
      if (type == 1) {
        ElMessage.success(`查询成功`)
      } else if (type == 2) {
        ElMessage.success(`重置成功`)
      }
    }
  })
}
const remove = ()=>{
  //getRefundCancel
  if(radioIndex.value){
    ElMessageBox.confirm(
      `售后单取消后无法执行后续操作，是否取消售后单：${radioIndex.value.uid ||'--'}。`,
      {
        confirmButtonText: '确定',
        cancelButtonText: '返回',
        type: 'warning',
      }
    ).then(()=>{
      getRefundCancel({ afterSalesUid: radioIndex.value.uid }).then((data: any) => {
        if (data.code == 200) {
          ElMessage.success(`取消成功`)
          radioIndex.value = undefined
          getRefundData(queryList.value)
        }
      })
      // ElMessage.success(`取消成功`)
    })
  }else {
    ElMessage.warning(`请先选择要取消的售后单`)
  }

}
const addressSubmit = (va: any) => {
  radioIndex.value = undefined
  getRefundData(queryList.value)
}
onActivated(() => {
  getRefundData(queryList.value)
  radioIndex.value = undefined
})
</script>

<style lang="scss" scoped>
@import './index';
</style>

